<template>
  <el-dialog
      title="批量设置轮播图"
      :visible="visible"
      width="850px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px">
      <el-form-item label="选择班牌:" prop="equip">
        <el-select v-model="form.equip" multiple placeholder="请选择" :loading="equipLoading" style="width: 100%">
          <el-option
              v-for="item in equipList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传轮播图:" prop="pic">
        <uploadImage :limit="10" v-model="form.pic"></uploadImage>
      </el-form-item>
      <el-form-item label="覆盖原数据:">
        <el-switch v-model="form.cover" active-color="#13ce66"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
          type="primary"
          @click="save"
          :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'

export default {
  props: {
    visible: Boolean
  },
  components: {uploadImage},
  data() {
    return {
      form: {
        equip: [],
        pic: [],
        cover: 0
      },
      rules: {
        equip: [
          {required: true, message: '请选择班牌', trigger: 'blur'}
        ],
        pic: [
          {required: true, message: '请上传轮播图', trigger: 'blur'}
        ]
      },
      loading: false,
      equipLoading: false,
      equipList: []
    }
  },
  mounted() {
    this.getEquipList()
  },
  methods: {
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post('/equip/batchSetPic', this.form).then(res => {
            this.loading = false
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              this.updateVisible(false)
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(e => {
            this.loading = false
            this.$message.error(e.message)
          })
        } else {
          return false
        }
      })
    },
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    getEquipList() {
      this.equipLoading = true
      this.$http.post('/equip/getEquipList').then(res => {
        if (res.data.code === 0) {
          this.equipList = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
        this.equipLoading = false
      }).catch(e => {
        this.$message.error(e.message)
        this.equipLoading = false
      })
    }
  }
}
</script>
